<template>
    <div id="Choice">
        <div class="wrap"><ul>
        <li><router-link :to="{name:'SearchPage'}" active-class="active">菜谱</router-link></li>
        <li><router-link :to="{name:'SearchMenu'}" active-class="active">菜单</router-link> </li>
        <li><router-link :to="{name:'UserSearch'}" active-class="active"> 用户</router-link></li>
        </ul></div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>
<style lang="less" scoped>
#Choice{
  margin-top: 80px;
}
a{
    text-decoration: none;
    color: #333;
}
.bottomColor{
    border-bottom: 2px solid #383830;

}
.active{
    font-weight: bold !important;
    color: #383830 !important;
}
.wrap{
    width: 1000px;
    margin: 0 auto;
    cursor: pointer;
    ul{
    width: 100%;
    height: 42px;
    list-style: none;
    margin-bottom: 25px;
    margin-top: 11px;
    li{
float: left;
height: 42px;
line-height: 42px;
margin-right: 30px;
    }
}
}
ul{
    width: 100%;
    height: 42px;
color: #333;
    list-style: none;
    margin-bottom: 25px;
    margin-top: 11px;
    li{
float: left;
height: 42px;
line-height: 42px;
margin-right: 30px;
    }
}

</style>
